<template>
  <div class="car-list-container">
    <div class="loading-overlay" v-if="loading">
      <div class="loading-spinner"></div>
      <div class="loading-text">数据加载中...</div>
    </div>
    <div class="tech-bg"></div>
    <div class="header">
      <h1>车辆管理系统</h1>
      <div class="header-line"></div>
    </div>

    <div class="search-bar">
      <div class="search-input">
        <input
          type="text"
          v-model="searchText"
          placeholder="搜索车型、VIN或品牌"
          @input="handleSearch"
        />
      </div>
      <div class="filter-group">
        <select v-model="sortBy" @change="handleSort">
          <option value="type">按车型排序</option>
          <option value="trademark">按品牌排序</option>
          <option value="company">按厂商排序</option>
        </select>
      </div>
    </div>

    <div class="car-list">
      <div
        class="car-card"
        v-for="car in paginatedCars"
        :key="car.vin"
        @click="goToDetail(car.vin)"
      >
        <div class="car-info">
          <div class="car-name">{{ car.type }}</div>
          <div class="car-details">
            <div class="detail-item">
              <span class="label">VIN：</span>
              <span class="value">{{ car.vin }}</span>
            </div>
            <div class="detail-item">
              <span class="label">品牌：</span>
              <span class="value">{{ car.trademark }}</span>
            </div>
            <div class="detail-item">
              <span class="label">厂商：</span>
              <span class="value">{{ car.company }}</span>
            </div>
            <div class="detail-item">
              <span class="label">动力类型：</span>
              <span class="value">{{ car.powerType }}</span>
            </div>
          </div>
        </div>
        <div class="car-stats">
          <div class="stat-item">
            <div class="stat-value">{{ car.seatingCapacity }}人</div>
            <div class="stat-label">准载人数</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ car.weightKg }}kg</div>
            <div class="stat-label">总质量</div>
          </div>
        </div>
      </div>
    </div>

    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1" class="page-btn">
        上一页
      </button>
      <span class="page-info"
        >第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span
      >
      <button
        @click="nextPage"
        :disabled="currentPage === totalPages"
        class="page-btn"
      >
        下一页
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useCarStore } from "@/stores/dataStore";
import { storeToRefs } from "pinia";
const carStore = useCarStore();
const { fetchCarInfo } = carStore;
const { carInfoList } = storeToRefs(carStore);

const router = useRouter();
const searchText = ref("");
const statusFilter = ref("");
const sortBy = ref("type");
const currentPage = ref(1);
const pageSize = 10;
const loading = ref(false);
const totalPages = ref(5); // 总页数写死为5页

// 跳转到详情页
const goToDetail = async (vin) => {
  router.push(`/carDetail/${vin}`);
};

// 计算属性：分页后的车辆列表
const paginatedCars = computed(() => {
  let result = [...carInfoList.value];

  // 搜索过滤
  if (searchText.value) {
    const search = searchText.value.toLowerCase();
    result = result.filter(
      (car) =>
        car.type.toLowerCase().includes(search) ||
        car.vin.toLowerCase().includes(search) ||
        car.trademark.toLowerCase().includes(search)
    );
  }

  // 排序
  result.sort((a, b) => {
    if (sortBy.value === "type") {
      return a.type.localeCompare(b.type);
    } else if (sortBy.value === "trademark") {
      return a.trademark.localeCompare(b.trademark);
    } else {
      return a.company.localeCompare(b.company);
    }
  });

  return result;
});

// 处理搜索
const handleSearch = async () => {
  currentPage.value = 1;
  loading.value = true;
  await fetchCarInfo({ page: currentPage.value, size: pageSize });
  loading.value = false;
};

// 处理排序
const handleSort = async () => {
  currentPage.value = 1;
  loading.value = true;
  await fetchCarInfo({ page: currentPage.value, size: pageSize });
  loading.value = false;
};

// 翻页方法
const prevPage = async () => {
  if (currentPage.value > 1) {
    currentPage.value--;
    loading.value = true;
    await fetchCarInfo({ page: currentPage.value, size: pageSize });
    loading.value = false;
  }
};

const nextPage = async () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
    loading.value = true;
    await fetchCarInfo({ page: currentPage.value, size: pageSize });
    loading.value = false;
  }
};

onMounted(async () => {
  loading.value = true;
  await fetchCarInfo({ page: currentPage.value, size: pageSize });
  loading.value = false;
});
</script>

<style scoped>
.car-list-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

.tech-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 50% 50%,
      rgba(0, 100, 255, 0.1) 0%,
      transparent 50%
    ),
    linear-gradient(45deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
  z-index: 1;
}

.header {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 30px;
}

.header h1 {
  color: #fff;
  font-size: 2.5rem;
  margin: 0;
  background: linear-gradient(45deg, #00f2fe, #4facfe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 2px;
}

.header-line {
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00f2fe, transparent);
  margin: 10px auto;
}

.search-bar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 20px;
}

.search-input input {
  width: 300px;
  padding: 10px 15px;
  border: 1px solid rgba(0, 242, 254, 0.3);
  border-radius: 5px;
  background: rgba(10, 10, 42, 0.8);
  color: #fff;
  font-size: 1rem;
}

.search-input input:focus {
  outline: none;
  border-color: #00f2fe;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
}

.filter-group select {
  padding: 10px 15px;
  margin-left: 10px;
  border: 1px solid rgba(0, 242, 254, 0.3);
  border-radius: 5px;
  background: rgba(10, 10, 42, 0.8);
  color: #fff;
  font-size: 1rem;
}

.filter-group select:focus {
  outline: none;
  border-color: #00f2fe;
}

.car-list {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.car-card {
  background: rgba(10, 10, 42, 0.8);
  border: 1px solid rgba(0, 242, 254, 0.3);
  border-radius: 10px;
  padding: 20px;
  color: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(0, 100, 255, 0.2);
}

.car-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 30px rgba(0, 100, 255, 0.4);
}

.car-name {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: #00f2fe;
}

.car-details {
  margin-bottom: 15px;
}

.detail-item {
  display: flex;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.label {
  color: #aaa;
  width: 60px;
}

.value {
  color: #fff;
}

.value.running {
  color: #00ff00;
}

.value.parking {
  color: #ffa500;
}

.value.maintenance {
  color: #ff0000;
}

.car-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(0, 242, 254, 0.2);
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #00f2fe;
}

.stat-label {
  font-size: 0.8rem;
  color: #aaa;
  margin-top: 5px;
}

.pagination {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding: 20px;
}

.page-btn {
  padding: 8px 15px;
  margin: 0 10px;
  border: 1px solid rgba(0, 242, 254, 0.3);
  border-radius: 5px;
  background: rgba(10, 10, 42, 0.8);
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.page-btn:hover:not(:disabled) {
  background: rgba(0, 242, 254, 0.2);
  border-color: #00f2fe;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  color: #fff;
  margin: 0 20px;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(0, 242, 254, 0.1);
  border-radius: 50%;
  border-top: 4px solid #00f2fe;
  animation: spin 1.5s linear infinite;
  margin-bottom: 20px;
}

.loading-text {
  color: #00f2fe;
  font-size: 1.2rem;
  text-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
  letter-spacing: 2px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
